<template>
    <el-tabs v-model="activeName" type="border-card" style="height: 90%">
        <el-dialog title="提示" :visible.sync="dialogTableVisible">
            <h2>注册成功</h2>
            <div>
                <span>您的会员ID是：</span>
                <span>{{memberId}}</span>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary">充 值</el-button>
                <el-button type="primary" @click="queding">返 回</el-button>
            </div>
        </el-dialog>
        <el-tab-pane label="会员注册" name="first">
            <div style="display: inline-block;">
                <div class="right" style="position: relative">
                    <div class="text_left"><span class="red">*</span>请输入手机号：</div>
                    <el-input v-model="phoneNum" placeholder="请输入手机号" clearable @blur="telyanzheng"></el-input>
                    <span class="telYan" :style=telYan>{{TelYan}}</span>
                </div>
                <div class="right">
                    <div class="text_left"><span class="red">*</span>请输入姓名：</div>
                    <el-input v-model="memberName" placeholder="请输入姓名" clearable></el-input>
                </div>
                <div class="right" style="position: relative">
                    <div class="text_left"><span class="red">*</span>请输入性别：</div>
                    <el-input v-model="memberSex" placeholder="请输入性别" clearable @blur="sexYanz"></el-input>
                    <span class="tishi" :style=sexCss>{{sexYan}}</span>
                </div>
                <div class="right" style="position: relative">
                    <div class="text_left"><span class="red">*</span>请输入密码：</div>
                    <el-input @blur="pwdYanz" v-model="pwd" placeholder="请输入密码" show-password></el-input>
                    <span class="tishi" :style=pwdCss>{{pwdYan}}</span>
                </div>
                <div class="right" style="position: relative">
                    <div class="text_left"><span class="red">*</span>请再次输入密码：</div>
                    <el-input @blur="yzfangfa" v-model="twoPwd" placeholder="请再次输入密码" show-password></el-input>
                    <span class="mimatishi" :style=yanCss>{{yanzheng}}</span>
                </div>
            </div>
            <div class="btn">
                <el-button type="primary" @click="tijiao">提交</el-button>
                <el-button type="primary" @click="chongzhi">重置</el-button>
            </div>

        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import axios from '../../http/http'
    import * as api from '../../http/api'

    export default {
        name: "tt_zchy",
        data() {
            return {
                activeName: 'first',
                telYan: '',
                phoneNum: '',
                memberName: '',
                memberSex: '',
                sexNum:'',
                sexYan:'',
                pwd: '',
                twoPwd: '',
                yanzheng: '',
                yanCss: '',
                pwdCss: '',
                sexCss:'',
                TelYan: '',
                pwdYan: '',
                memberId: '',
                dialogTableVisible: false,
            }
        },
        methods: {
            yzfangfa() {
                if (this.twoPwd != '') {
                    this.yanzheng = '';
                    if (this.pwd === this.twoPwd) {
                        this.yanzheng = '两次密码输入正确';
                        this.yanCss = 'color: #00FF00'
                    } else {
                        this.yanzheng = '两次密码输入错误';
                        this.yanCss = 'color: red'
                    }
                } else {
                    this.yanzheng = '密码不能为空';
                    this.yanCss = 'color: red; right: -120px'
                }
            },
            tijiao() {
                if (this.phoneNum != '' &&this.memberName!=''&&this.memberSex!=''&&this.pwd!=''&&this.twoPwd!=''&&this.pwd===this.twoPwd&&this.TelYan==='该手机号码可以注册'&&this.sexYan==='性别输入正确'){
                    axios({
                        url:api.zhuce,
                        method: 'post',
                        data:{
                            name:this.memberName,
                            password:this.pwd,
                            sex:this.sexNum,
                            tel:this.phoneNum
                        }
                    }).then(res=>{
                        console.log(res)
                        if (res.data.code===200) {
                            this.dialogTableVisible = true;
                            this.yanzheng = '';
                            this.phoneNum = '';
                            this.memberName = '';
                            this.pwd = '';
                            this.twoPwd = '';
                            this.pwdYan = '';
                            this.TelYan = '';
                            this.sexYan='';
                            this.memberSex='';
                            this.memberId=res.data.info
                        }else {
                            this.$message.error('注册失败')
                        }
                    }).catch(err=>{
                        console.log(err)
                    });

                }else {
                    this.$message.error('请确定填写了所有信息或手机号码可以注册')
                }

            },
            queding() {
                this.dialogTableVisible = false
            },
            chongzhi() {
                this.phoneNum = '';
                this.memberName = '';
                this.pwd = '';
                this.twoPwd = '';
                this.pwdYan = '';
                this.TelYan = '';
                this.yanzheng = ''
            },
            telyanzheng() {
                this.TelYan = '';
                if (this.phoneNum != '') {
                    axios({
                        url: api.panduanshouji,
                        method: 'get',
                        params: {tel: this.phoneNum}
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.TelYan = '该手机号码可以注册'
                            this.telYan = 'color: #00FF00'
                        } else {
                            this.TelYan = '该手机号码已经注册'
                            this.telYan = 'color: red'
                        }
                    }).catch(err => {
                        console.log(err)
                    });
                } else {
                    console.log(111)
                    this.TelYan = '手机号码不能为空';
                    this.telYan = 'color: red'
                }

            },
            pwdYanz() {
                this.pwdYan = '';
                if (this.pwd == '') {
                    this.pwdYan = '密码不能为空';
                    this.pwdCss = 'color: red'
                }
            },
            sexYanz(){
                if (this.memberSex!='') {
                    if (this.memberSex==='男'|| this.memberSex==='女') {
                        if (this.memberSex==='男') {
                            this.sexYan='性别输入正确';
                            this.sexCss='color: #00FF00'
                            this.sexNum=0
                        }else {
                            this.sexYan='性别输入正确';
                            this.sexCss='color: #00FF00'
                            this.sexNum=1
                        }
                    }else {
                        this.sexYan='请输入正确的性别';
                        this.sexCss='color: red;right: -150px'
                    }
                }else {
                    this.sexYan='性别不能为空';
                    this.sexCss='color: red'
                }
            }
        },
    }
</script>

<style scoped lang="less">
    .el-input {
        width: 200px;
        margin: 10px;
    }

    .text_left, .el-input {
        display: inline-block;
    }

    .right {
        text-align: right;
        margin: 20px 0;
    }

    .btn {
        margin: 20px 0;

        .el-button {
            margin: 0 20px;
        }
    }

    .tishi {
        position: absolute;
        bottom: 20px;
        right: -120px;
    }
    .mimatishi{
        position: absolute;
        bottom: 20px;
        right: -150px;
    }
    #myIcon {
        display: inline-block;
        width: 20px;
        height: 20px;
    }

    .red {
        color: red;
    }

    .telYan {
        position: absolute;
        bottom: 20px;
        right: -150px;
    }
</style>